---
title: Ripple
description: "`Ripple`は、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。"
source: components/ripple
style: components/ripple/ripple.style.ts
---

```tsx preview functional client
const { onClick, ...rippleProps } = useRipple()

return (
  <Center
    as="button"
    type="button"
    onClick={onClick}
    h="10"
    px="3"
    bg="bg.contrast"
    color="fg.contrast"
    rounded="l2"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple {...rippleProps} />
  </Center>
)
```

:::warning
`Ripple`の親要素のスタイルに`position: relative`と`overflow: hidden`を設定する必要があります。
:::

## 使い方

:::code-group

```tsx [package]
import { Ripple, useRipple } from "@yamada-ui/react"
```

```tsx [alias]
import { Ripple, useRipple } from "@/components/ui"
```

```tsx [monorepo]
import { Ripple, useRipple } from "@workspaces/ui"
```

:::

```tsx
<Ripple />
```

### カラーを変更する

カラーを変更する場合は、`color`に色を設定します。デフォルトでは、`currentColor`が設定されています。

```tsx preview functional client
const { onClick, ...rippleProps } = useRipple()

return (
  <Center
    as="button"
    type="button"
    onClick={onClick}
    h="10"
    px="3"
    bg="bg.contrast"
    color="fg.contrast"
    rounded="l2"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple color="warning" {...rippleProps} />
  </Center>
)
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview functional client
const { onClick, ...rippleProps } = useRipple({ disabled: true })

return (
  <Center
    as="button"
    type="button"
    onClick={onClick}
    h="10"
    px="3"
    bg="bg.contrast"
    color="fg.contrast"
    rounded="l2"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple {...rippleProps} />
  </Center>
)
```

または、`Ripple`の`disabled`を`true`にすることで無効にできます。

```tsx preview functional client
const { onClick, ...rippleProps } = useRipple()

return (
  <Center
    as="button"
    type="button"
    onClick={onClick}
    h="10"
    px="3"
    bg="bg.contrast"
    color="fg.contrast"
    rounded="l2"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple disabled {...rippleProps} />
  </Center>
)
```

## Props

<PropsTable name="ripple" />
